<template>
	<view class="rank-page">
		<!-- 标题和筛选 -->
		<view class="page-header">
			<text class="page-title">排行榜</text>
			<view class="filter-tabs">
				<view class="tab-item" :class="{ active: activeTab === 'points' }" @click="switchTab('points')">
					<text>积分排行</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'participation' }"
					@click="switchTab('participation')">
					<text>参与排行</text>
				</view>
			</view>
		</view>
		<!-- 排行榜内容 -->
		<scroll-view class="rank-container" scroll-y @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<!-- 排行榜列表 -->
			<view class="rank-list">
				<view class="rank-item" v-for="(item, index) in rankList" :key="item.id" :class="{
            'top-1': index === 0,
            'top-2': index === 1,
            'top-3': index === 2
          }">
					<view class="rank-index">
						<text v-if="index > 2">{{ index + 1 }}</text>
						<image v-else :src="`/static/rank-${index + 1}.svg`" mode="aspectFit"></image>
					</view>
					<view class="user-info">
						<text class="user-name">{{ item.name }}</text>
					</view>
					<view class="rank-value">
						<text>{{ activeTab === 'points' ? item.points : item.participationCount }}<text
								class="unit">{{ activeTab === 'points' ? '积分' : '次' }}</text></text>
					</view>
				</view>
				<!-- 加载更多 -->
				<view class="load-more" v-if="loading">
					<uni-load-more status="loading"></uni-load-more>
				</view>
				<view class="no-more" v-if="noMoreData">
					<text>没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getRankList,
		getActivityRankList
	} from '../../http/top'
	// 当前激活的标签
	const activeTab = ref('points') // points 或 participation
	// 排行榜数据
	const rankList = ref([])
	// 分页相关
	const currentPage = ref(1)
	const pageSize = ref(20)
	const noMoreData = ref(false)
	const loading = ref(false)
	const refreshing = ref(false)
	// 当前用户ID
	const currentUserId = ref(null)
	// 从本地存储获取当前用户ID
	const getCurrentUserId = () => {
		const userId = uni.getStorageSync('userId')
		if (userId) {
			currentUserId.value = userId
		}
	}
	// 切换标签
	const switchTab = (tab) => {
		if (activeTab.value !== tab) {
			activeTab.value = tab
			resetRankData()
			fetchRankData()
		}
	}
	// 重置排行榜数据
	const resetRankData = () => {
		rankList.value = []
		currentPage.value = 1
		noMoreData.value = false
	}
	// 获取排行榜数据
	const fetchRankData = async () => {
		if (loading.value || noMoreData.value) return
		loading.value = true
		try {
			let res
			if (activeTab.value === 'points') {
				// 积分排行榜
				res = await getRankList(currentPage.value, pageSize.value)
				console.log(res)
			} else {
				// 参与排行榜
				res = await getActivityRankList({
					pageNum: currentPage.value,
					pageSize: pageSize.value,
					joinNum: 1
				})
				console.log(res)
			}
			// 处理接口返回数据
			const records = res.records || []
			// 转换数据结构
			const transformedList = records.map((record, index) => {
				// 积分排行榜数据结构
				if (activeTab.value === 'points') {
					return {
						id: record.id,
						studentId: record.studentId,
						rank: (currentPage.value - 1) * pageSize.value + index + 1,
						name: record.studentName,
						points: record.totalPoint,
						participationCount: 0
					}
				}
				// 参与排行榜数据结构
				else {
					return {
						id: record.id,
						rank: (currentPage.value - 1) * pageSize.value + index + 1,
						name: record.title,
						points: 0,
						participationCount: record.peopleNum
					}
				}
			})

			if (currentPage.value === 1) {
				rankList.value = transformedList
			} else {
				rankList.value = [...rankList.value, ...transformedList]
			}

			// 分页判断
			if (records.length < pageSize.value || rankList.value.length >= res.total) {
				noMoreData.value = true
			} else {
				currentPage.value++
			}
		} catch (error) {
			console.error('获取排行榜数据失败:', error)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
			refreshing.value = false
		}
	}
	// 下拉刷新
	const onRefresh = () => {
		refreshing.value = true
		resetRankData()
		fetchRankData()
	}
	// 加载更多
	const loadMore = () => {
		if (!noMoreData.value && !loading.value) {
			fetchRankData()
		}
	}
	// 页面加载
	onLoad(() => {
		getCurrentUserId() // 获取当前用户ID
		fetchRankData() // 获取排行榜数据
	})
</script>

<style scoped>
	.rank-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 页面头部 */
	.page-header {
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		z-index: 10;
	}

	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 30rpx;
	}

	.filter-tabs {
		display: flex;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #4facfe;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background-color: #4facfe;
		border-radius: 3rpx;
	}

	/* 时间筛选 */
	.time-filter {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.filter-selector {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		color: #666;
	}

	/* 排行榜容器 */
	.rank-container {
		flex: 1;
		height: 100%;
	}


	.rank-index {
		width: 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #4facfe;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 30rpx;
		margin-bottom: 5rpx;
	}

	.rank-value {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 32rpx;
		font-weight: bold;
		color: #4facfe;
	}

	.rank-value .unit {
		font-size: 20rpx;
		color: #999;
		font-weight: normal;
	}

	/* 排行榜列表 */
	.rank-list {
		padding: 0 20rpx;
	}

	.rank-item {
		display: flex;
		align-items: center;
		padding: 25rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.rank-item.top-1 {
		background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
		border: 1rpx solid rgba(255, 215, 0, 0.3);
	}

	.rank-item.top-2 {
		background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
		border: 1rpx solid rgba(192, 192, 192, 0.3);
	}

	.rank-item.top-3 {
		background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
		border: 1rpx solid rgba(205, 127, 50, 0.3);
	}

	.rank-item .rank-index {
		width: 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #666;
	}

	.rank-item.top-1 .rank-index,
	.rank-item.top-2 .rank-index,
	.rank-item.top-3 .rank-index {
		width: 70rpx;
		height: 70rpx;
	}

	.rank-item .rank-index image {
		width: 100%;
		height: 100%;
	}

	.rank-item.top-1 .rank-value {
		color: #ffd700;
	}

	.rank-item.top-2 .rank-value {
		color: #c0c0c0;
	}

	.rank-item.top-3 .rank-value {
		color: #cd7f32;
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		padding: 30rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.no-more {
		padding-bottom: 50rpx;
	}
</style>